<template>
  <div>
    <div
      class="flex-block"
      v-for="(item, index) in ruleForm.fileList"
      :key="index"
    >
      <section>
        <div class="info-block textarea">
          <el-input v-model="item.desc" :autosize="{ minRows: 5, maxRows: 8 }" type="textarea" placeholder="请输入功能说明（控制在2000字内）"  maxlength="2000" show-word-limit />
        </div>
        <div class="info-block uploadarea">
          <MediaUpload v-model="item.fileUrl" v-model:name="item.fileName"/>
        </div>
      </section>
      <div class="button-area">
        <b @click="deleteQuery(index)">-</b>
      </div>
    </div>
    <footer>
      <el-button type="primary" @click="handleCreate">+ 增加说明</el-button>
    </footer>
  </div>
</template>

<script>
import { defineComponent, computed, ref } from "vue";
import MediaUpload from "@/components/MediaUpload.vue";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "FunctionIntroduction",
  props: {
    modelValue: {
      type: Object,
      default: () => {},
    },
    rules: {
      type: Object,
      default: () => {},
    },
  },
  components: { MediaUpload },
  emits: ["update:modelValue", "handle-create", "handle-delete"],
  setup(props, { emit }) {
    
    const ruleForm = computed({
      get: () => props.modelValue,
      set: (val) => emit("update:modelValue", val),
    });
   
    const handleCreate = () => {
      let canAdd = true;
      const query = { ...props.modelValue };
      query.fileList.map((item) => {
        if (!item.fileUrl) {
          canAdd = false;
        }
      });
      if (canAdd) {
        query.fileList.push({
          fileName: null,
          fileUrl: null,
          desc: null
        });
      } else {
        ElMessage.warning("请上传说明图片");
      }
    };
    const deleteQuery = (index) => {
      const query = { ...props.modelValue };
      query.fileList.splice(index, 1);
    }
    return {
      ruleForm,
      deleteQuery,
      handleCreate,
    };
  },
});
</script>

<style lang="scss" scoped>
.el-input-number {
  width: auto;
  min-width: 114px;
  .el-input__inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}
.flex-block {
  display: flex;
  width: 100%;
  &.haad {
    background: #eaf0f8;
    
  }
  section {
    display: flex;
    width: calc(100% - 30px);
  }
  .button-area {
    width: 30px;
    text-align: right;
    b {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 16px;
      border-radius: 50%;
      background: rgba(255, 139, 58, 0.1);
      border: 1px solid #FF8B3A;
      color: #FF8B3A;
      text-align: center;
      font-size: 24px;
      margin-top: 50px;
    }
  }
  .info-block {
    width: 14%;
    &.textarea {
      width: calc(100% - 130px);
    }
    &.uploadarea {
      width: 120px;
    }
    & + .info-block {
      margin-left: 10px;
    }
  }
}
footer {
  margin-top: 10px;
}
</style>
